﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width" />
    <title>客户管理</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <script src="../Content/scripts/jquery-1.11.1.min.js"></script>
    <link href="../Content/styles/font-awesome.min.css" rel="stylesheet" />
    <link href="../Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <script src="../Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script>
    <link href="../Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <script src="../Content/scripts/bootstrap/bootstrap.min.js"></script>
    <link href="../Content/scripts/plugins/jqgrid/jqgrid.css" rel="stylesheet" />
    <link href="../Content/styles/learun-ui.css" rel="stylesheet" />
    <script src="../Content/scripts/plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../Content/scripts/plugins/jqgrid/jqgrid.min.js"></script>
    <script src="../Content/scripts/plugins/tree/tree.js"></script>
    <script src="../Content/scripts/plugins/validator/validator.js"></script>
    <script src="../Content/scripts/utils/learun-ui.js"></script>
    <script src="../Content/scripts/utils/learun-form.js"></script>
    <script src="../Content/scripts/plugins/layout/jquery.layout.js"></script>
    <script src="../js/getUrlParam.js"></script>

    <style>
        html, body {
            height: 100%;
            width: 100%;
        }
    </style>

</head>
<body>
    <div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
        <div class="ui-layout-west">
            <div class="west-Panel" style="margin: 0px; border-top: none; border-left: none; border-bottom: none;">
                <div style="color:#9f9f9f;padding-top:5px; padding-bottom:5px;padding-left:8px;"><i style="padding-right:5px;" class="fa fa-info-circle"></i><span>填写内容,选择右侧设备台号</span></div>
                <table class="form" id="ruleinfo">
                    <tr>
                        <th class="formTitle">厂名<font face="宋体">*</font></th>
                        <td class="formValue" style="width: 150px;">
                            <label id="CustomName" class="form-control"></label>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">车间<font face="宋体">*</font></th>
                        <td class="formValue" style="width: 150px;">
                            <label id="CustomChejian" class="form-control"></label>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">设备类型<font face="宋体">*</font></th>
                        <td class="formValue" style="width: 150px;">
                            <select id="EquType" class="form-control"></select>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">总数量<font face="宋体">*</font></th>
                        <td class="formValue" style="width: 150px;">
                            <label id="totalcount" class="form-control"></label>
                        </td>
                    </tr>

                    <!--<tr>
                        <th class="formTitle">铭牌号<font face="宋体">*</font></th>
                        <td class="formValue" style="width: 150px;">
                            <label id="no" class="form-control"></label>
                        </td>
                        <th class="formTitle">台号<font face="宋体">*</font></th>
                        <td class="formValue">
                            <label id="no1" class="form-control"></label>
                        </td>
                    </tr>-->
                </table>
            </div>
        </div>
        <div class="ui-layout-center">
            <div class="treesearch">
                <input id="txt_TreeKeyword" type="text" class="form-control" style="border-top: none;" placeholder="请输入要查询关键字" />
                <span id="btn_TreeSearch" class="input-query" title="Search"><i class="fa fa-search"></i></span>
            </div>
            <div class="center-Panel" style="margin: 0px; border-right: none; border-left: none; border-bottom: none; background-color: #fff; overflow: auto; padding-bottom: 10px;">
                <div class="gridPanel">
                </div>
            </div>
        </div>
    </div>
    <style>
        .form .formTitle {
            width: 65px;
            font-size: 15px;
        }

        .card-box-img {
            line-height: initial;
        }

            .card-box-img img {
                width: 58px;
                height: 58px;
                border-radius: 0px;
                margin-left: 0px;
            }

        .card-box-content p {
            height: 20px;
        }
    </style>

    <script src="CustomerJS.js"></script>
    <script src="../Equipment/EquInfoJS.js"></script>
    <script>

        var IDS = UrlParam.paramValues("ID");
        var ID = IDS[0];
        //var customername = UrlParam.paramValues("customername");
        $(function () {
            InitialPage();

            //GetMember($("#equtype").val());
        });

        //初始化页面
        function InitialPage() {
            //layout布局
            $('#layout').layout({
                applyDemoStyles: true,
                west: {
                    size: $(window).width() * 0.35
                },
                spacing_open: 0,
                onresize: function () {
                    $(window).resize()
                }
            });

            $(".center-Panel").height($(window).height() - 40)
            $(".west-Panel").height($(window).height());

        }

        function GetMember(EquType) {
            $.ajax({
                url: "CustomerHandler.ashx",
                data: {
                    Action: "GetEquNoList",
                    EquType: EquType,
                    CustomerID: ID
                },
                type: "post",
                dataType: "json",
                //contentType: "application/json;charset=utf-8",
                success: function (data) {
                    if (data == null) return false;
                    console.log(data);
                    var _html = "";
                    $.each(data, function (i, row) {
                        var imgName = "Scheme.png";
                        var active = "";
                        if (row.IsActive == 1) {
                            active = "active";
                        }
                        _html += '<div class="card-box shcemeinfocheck ' + active + '" style="width: 260px;">';
                        _html += '    <div class="card-box-img" >';
                        _html += '        <img src="../images/' + imgName + '" />';
                        _html += '    </div>';
                        _html += '    <div id="' + row.EquNo + '"  class="card-box-content" style="width: 150px;">';
                        _html += '        <p style="width: 100px;">铭牌号：' + row.EquNo + '</p>';
                        _html += '        <p style="width: 200px;">设备类型：' + row.EquType + '</p>';
                        _html += '    </div><i></i>';
                        _html += '</div>';
                    });
                    $(".gridPanel").html(_html);
                    $(".card-box").click(function () {
                        if (!$(this).hasClass("active")) {
                            var content = $(this);
                            content.addClass("active")
                            //var material = $(this).find('div').last().attr('id');
                            var totalcount = $("#totalcount").text();
                            if (totalcount == "") {
                                totalcount = 0;
                            }
                            totalcount = parseInt(totalcount) + 1;
                            $("#totalcount").html(totalcount);

                            var _html = "";
                            var taihao = $(this).find('div').last().attr('id') + 'taihao';
                            var taihaotr = $(this).find('div').last().attr('id') + 'tr';
                            _html += "<tr id=" + taihaotr + ">";
                            _html += "<th class='formTitle'>铭牌号<font face='宋体'>*</font></th>";
                            _html += "<td class='formValue' style='width: 150px;'>";
                            _html += "<label id=" + $(this).find('div').last().attr('id') + " class='form-control'>" + $(this).find('div').last().attr('id') + "</label>";
                            _html += "</td>";
                            _html += "<th class='formTitle'>台号<font face='宋体'>*</font></th>";
                            _html += "<td class='formValue'>";
                            _html += "<input id=" + taihao + " class='form-control' value=" + totalcount + "></input>";
                            _html += "</td>";
                            _html += "</tr>";

                            $("#ruleinfo").append(_html);

                        } else {
                            $(this).removeClass("active")
                            var totalcount = $("#totalcount").text();
                            totalcount = parseInt(totalcount) - 1;
                            $("#totalcount").html(totalcount);
                            if (totalcount == 0) {
                                $("#totalcount").html("");
                            }

                            var thisno = $(this).find('div').last().attr('id');
                            var thistaihao = thisno + "tr";
                            $("#" + thistaihao + "").remove();

                        }
                    });
                    Loading(false);
                }, beforeSend: function () {

                    $('#Description').text("");
                    Loading(true);
                }
            });
            //模糊查询模板（注：这个方法是理由jquery查询）
            $("#txt_TreeKeyword").keyup(function () {
                var value = $(this).val();
                if (value != "") {
                    window.setTimeout(function () {
                        $(".shcemeinfocheck")
                         .hide()
                         .filter(":contains('" + (value.toLocaleUpperCase()) + "')")
                         .show();
                    }, 200);
                } else {
                    $(".shcemeinfocheck").show();
                }
            }).keyup();
        }

        //保存表单
        function AcceptClick(grid) {

            if (!$('#roleaddform').Validform()) {
                return false;
            }

            var userIds = [];
            var taihaototal = [];

            $('.gridPanel .active .card-box-content').each(function () {
                var taihao = $(this).attr('id') + 'taihao';
                console.log($("#" + taihao + "").val());
                taihaototal.push($("#" + taihao + "").val());
            });

            if (arrRepeat(taihaototal)) {
                dialogMsg("设备台号有重复项", 0);
                return false;
            }

            $('.gridPanel .active .card-box-content').each(function () {
                userIds.push($(this).attr('id'));
            });

            var EquType = $("#EquType").val();
            var totalcount = $("#totalcount").text();

            $.customerinfojs.saveCustomerEquKaoHaoInfo(ID, EquType, totalcount, userIds, taihaototal, grid);

        }

        function request(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

        $.customerinfojs.getCustomNameByID(ID);
        $.equinfojs.initEquTypeList();

        $("#EquType").on('change', function () {

            var selectType = $(this).find('option:selected').val();
            GetMember(selectType);
        });

        function arrRepeat(arr) {
            var arrStr = JSON.stringify(arr), str;
            for (var i = 0; i < arr.length; i++) {
                if ((arrStr.match(new RegExp(arr[i], "g")).length) > 1) {
                    return true;
                }
            };
            return false;
        }


    </script>

</body>
</html>
